<template>
  <div>
    <overview-login></overview-login>
    <divider :icon='divider1.icon' :text="divider1.text"></divider>
    <product-tag-item :product="depositProduct" class="product-tag-item" @click.native="goBankDepositIndex">
    </product-tag-item>
    <divider :icon='divider2.icon' :text="divider2.text"></divider>
    <product-tag-item :product="fixedDepositProduct" class="product-tag-item">
    </product-tag-item>
    <product-tag-item :product="fixedDepositProductPlus" class="product-tag-item">
    </product-tag-item>
    <divider :icon='divider3.icon' :text="divider3.text"></divider>
    <fund-product-item :productList="fundProductList"></fund-product-item>
    <divider :icon='divider4.icon' :text="divider4.text"></divider>
  </div>
</template>

<script>
  import ProductTagItem from '@/page/home/components/ProductTagItem'
  import FundProductItem from '@/page/home/components/FundProductItem'
  import OverviewLogin from '@/page/home/components/OverviewLogin'
  import Divider from '@/components/Divider'
  import { LoadMore, Swiper, SwiperItem } from 'vux'

  export default {
    name: 'HelloWorld',
    components: {
      ProductTagItem,
      FundProductItem,
      OverviewLogin,
      LoadMore,
      Swiper,
      SwiperItem,
      Divider
    },
    data () {
      return {
        divider1: {
          text: '惊喜的存款',
          icon: '#icon-shangdian2'
        },
        depositProduct: {
          type: 1,
          name: '银行存款',
          rate: '4.875',
          rateStr: '最高年利率',
          features: ['央行监管', '随存随取'],
          rateArray: [
            {'title': '', rateRange: ''},
            {'title': '', rateRange: ''}
          ],
          detailUrl: ' ',
          tabColor: '#42578E'
        },
        divider2: {
          text: '灵活与收益',
          icon: '#icon-huangjinzichan'
        },
        fixedDepositProduct: {
          type: 2,
          name: '活期+',
          rate: '4.875',
          rateStr: '最高年利率',
          features: ['央行监管', '随存随取'],
          rateArray: [
            {'title': '', rateRange: ''},
            {'title': '', rateRange: ''}
          ],
          detailUrl: ' ',
          tabColor: '#80C7E7'
        },
        fixedDepositProductPlus: {
          type: 3,
          names: ['定期+', '短期+'],
          rate: '4.875',
          rateStr: '',
          features: ['', ''],
          list: [
            {term: '短期+ 1~21天', rateRange: '2.29%~4.20%'},
            {term: '定期+ 28天以上', rateRange: '4.19%~5.01%'}
          ],
          detailUrl: ' ',
          tabColor: '#619CD6'
        },
        fundProductList: [
          {name: '基金', feature: '专业人士打理', icon: '#icon-jijinzhanghuguanli', color: '#F07C65', url: ''},
          {name: '微微金', feature: '生息实物黄金', icon: '#icon-gold', color: '#FFCB5B', url: ''}
        ],
        divider3: {
          text: '资产配置多样化',
          icon: '#icon-shouyiyulishuai'
        },
        divider4: {
          text: '关于我们',
          icon: '#icon-guanyuwomen1'
        }
      }
    },
    methods: {
      goBankDepositIndex: function () {
        this.$router.push({path: 'depositIndex'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .product-tag-item {
    width: 94%;
    margin: 3%;
  }
</style>
